<template>
  <div>
    <v-layout class="px-3 pb-2">
      <v-flex xs2>
        <v-btn  @click="addBrand"  small color="info">新增品牌</v-btn>

      </v-flex>
      <v-spacer/>
      <v-flex xs4>
        <v-text-field label="搜索" hide-details append-icon="search" v-model="key"/>
      </v-flex>
    </v-layout>

    <v-data-table
      :headers="headers"
      :items="brands"
      :pagination.sync="pagination"
      :total-items="totalBrands"
      :loading="loading"
      class="elevation-1"
    >
      <template slot="items" slot-scope="props">
        <td class="text-xs-center">{{ props.item.id }}</td>
        <td class="text-xs-center">{{ props.item.name }}</td>
        <td class="text-xs-center"><img :src="props.item.image" alt=""></td>
        <td class="text-xs-center">{{ props.item.letter }}</td>
        <td class="text-xs-center">
          <v-btn flat icon color="info">
            <v-icon>edit</v-icon>
          </v-btn>
          <v-btn flat icon color="error">
            <v-icon>delete</v-icon>
          </v-btn>
        </td>

      </template>

    </v-data-table>

    <v-dialog v-model="show" max-width="600" scrollable v-if="show">
      <v-card>
        <v-toolbar dark dense color="primary">
          <v-toolbar-title>{{isEdit ? '修改品牌' : '新增品牌'}}</v-toolbar-title>
          <v-spacer/>
          <v-btn icon @click="show = false">
            <v-icon>close</v-icon>
          </v-btn>
        </v-toolbar>
        <v-card-text class="px-5 py-2">
          <!-- 表单 -->
          <brand-form :oldBrand="brand" :isEdit="isEdit" @close="show = false" :reload="getDataFromApi"/>
        </v-card-text>
      </v-card>
    </v-dialog>
  </div>

</template>

<script>
  import BrandForm from './BrandForm'
  import {brandData} from '../../mockDB'

  export default {
    name: "brand",
    components: {
      BrandForm
    },
    data() {
      return {
        headers: [
          {text: "品牌id", value: "id", align: 'center', sortable: true},
          {text: "品牌名称", value: "name", align: 'center', sortable: false},
          {text: "品牌LOGO", value: "image", align: 'center', sortable: false},
          {text: "品牌首字母", value: "letter", align: 'center', sortable: true},
          {text: "操作", align: 'center', sortable: false},
        ],
        show: false,
        brands: [],
        pagination: {},
        totalBrands: 0,
        loading: false,
        key: "",//搜索条件
      }
    },

    watch: {
      key() {
        this.pagination.page = 1;

      },
      pagination: {
        deep: true,
        handler() {
          this.loadBrands();
        }

      },

      show(val, oldVal) {
        // 表单关闭后重新加载数据
        if (oldVal) {
          this.getDataFromApi();
        }
      }
    },
    mounted() {
      this.getDataFromApi();
    },

    methods: {

      loadBrands() {
        this.loading = true;
        //发送请求
        this.$http.get("/item/brand/page", {
          //参数
          params: {
            //搜索条件
            page: this.pagination.page,//当前页
            rows: this.pagination.rowsPerPage,//每页大小
            sortBy: this.pagination.sortBy,//排序字段
            desc: this.pagination.descending,//是否降序
            key: this.key//搜索条件
          }
        }).then(resp => {
          this.brands = resp.data.items;
          this.totalBrands = resp.data.total;
          this.loading = false;
        })
      },


        addBrand()
        {
          this.brand = {};
          this.isEdit = false;
          this.show = true;
        },
        editBrand(item)
        {
          this.brand = item;
          this.isEdit = true;
          this.show = true;
          // 查询商品分类信息，进行回显
          this.$http.get("/item/category/bid/" + item.id)
            .then(resp => {
              this.brand.categories = resp.data;
            })

        },
        deleteBrand(item)
        {
          this.$message.confirm('此操作将永久删除该品牌, 是否继续?').then(() => {
            // 发起删除请求
            this.$http.delete("/item/brand?id=" + item.id,)
              .then(() => {
                // 删除成功，重新加载数据
                this.$message.success("删除成功！");
                this.getDataFromApi();
              })
          }).catch(() => {
            this.$message.info("删除已取消！");
          });

        },
        getDataFromApi()
        {
          this.loading = true;
          // 200ms后返回假数据
          window.setTimeout(() => {
            this.items = brandData.slice(0, 4);
            this.totalItems = 100
            this.loading = false;
          }, 200)
        }
      }
    }

</script>

<style scoped>

</style>
